<template>
  <view class="resetPass-page">
    <view class="main">
      <tui-input
        v-model="form.mobile"
        type="number"
        placeholder="请输入手机号"
        :maxlength="11"
        clearable
        :adjustPosition="false"
        :lineLeft="false"
        padding="13px 0 13px 0"
        class="username"
      />
      <tui-input
        v-model="form.code"
        type="number"
        placeholder="请输入验证码"
        :maxlength="8"
        clearable
        :adjustPosition="false"
        :lineLeft="false"
        padding="13px 0 13px 0"
        class="password"
      >
        <view slot="right" class="send-code">
          <tui-countdown-verify
            :disabled="form.mobile.length != 11"
            :successVal="sendSuccess"
            :resetVal="sendFail"
            @send="sendCode"
            text="获取验证码"
          />
        </view>
      </tui-input>
      <tui-input
        v-model="form.password"
        placeholder="请输入新密码（长度为6-20个字符）"
        :maxlength="20"
        password
        clearable
        :adjustPosition="false"
        :lineLeft="false"
        padding="13px 0 13px 0"
        class="password"
      />
      <tui-button
        @click="submit"
        :disabled="
          form.mobile.length != 11 || !form.code || form.password.length < 6
        "
        >提交</tui-button
      >
    </view>
  </view>
</template>

<script>
import { sendLoginSms, resetByMobile } from "@/api/auth.js";
import { isMobile } from "@/common/js/util.js";
export default {
  data() {
    return {
      form: {
        mobile: "",
        password: "",
        code: "",
      },
      sendSuccess: 0,
      sendFail: 0,
    };
  },
  onLoad(options) {
    if (options.type && options.type == "reset") {
      uni.setNavigationBarTitle({
        title: "找回密码",
      });
    }
  },
  methods: {
    sendCode() {
      if (!isMobile(this.form.mobile)) {
        this.msg("手机号格式错误");
        this.sendFail++;
        return;
      }
      sendLoginSms(this.form.mobile).then((res) => {
        if (res.success) {
          this.sendSuccess++;
          this.msg("发送短信验证码成功，请注意查收");
        } else {
          this.sendFail++;
        }
      });
    },
    submit() {
      this.showLoading("提交中...");
      resetByMobile(this.form).then((res) => {
        uni.hideLoading();
        if (res.success) {
          this.msg("重置密码成功，请牢记您的新密码");
          uni.navigateBack();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./resetPass.scss";
</style>
